<template>
    <div>
        <Form>
            <Row>
                <Col span="5">
                    <FormItem label="用户名">
                        <Input
                            type="text"
                            v-model="from.username"
                            style="width:200px"
                            placeholder="Select username"
                        />
                    </FormItem>
                </Col>
                <Col span="5">
                    <FormItem label="注册时间">
                        <DatePicker
                            v-model="from.time"
                            type="daterange"
                            :start-date="new Date(2019, 2, 26)"
                            placement="bottom-end"
                            placeholder="Select date"
                            style="width: 200px"
                        ></DatePicker>
                    </FormItem>
                </Col>
                <Col span="5">
                    <FormItem label="省份">
                        <Select v-model="from.province" style="width:200px">
                            <Option v-for="item in cityList" :value="item" :key="item">{{ item }}</Option>
                        </Select>
                    </FormItem>
                </Col>
            </Row>
            <Row>
                <Col span="5">
                    <FormItem label="登录次数">
                        <Col span="5" >
                            <Input type="text" style="width:50px" />
                        </Col>
                        <Col span="2">
                            <span>--</span>
                        </Col>
                        <Col span="2" >
                            <Input type="text" style="width:50px" />
                        </Col>
                    </FormItem>
                </Col>
                <Col span="5">
                    <Button type="primary">搜索</Button>
                </Col>
            </Row>
        </Form>
        <Table :columns="columns1" :data="data1"></Table>
        <Page :total="total" :current="current" @on-change="change"></Page>
    </div>
</template>
<script>
export default {
    data() {
        return {
            from: {
                username: '',
                time: '',
                province: ''
            },
            gameName: "",
            userId: "",
            total: 1,
            current: 1,
            columns1: [
                {
                    title: "ID",
                    key: "userid"
                },
                {
                    title: "用户名",
                    key: "username"
                },
                {
                    title: "注册时间",
                    key: "time"
                },
                {
                    title: "省份",
                    key: "province"
                },
                {
                    title: "宠物数",
                    key: "petNum"
                },
                {
                    title: "关注人数",
                    key: "followNum"
                },
                {
                    title: "粉丝人数",
                    key: "fansNum"
                },
                {
                    title: "帖子数",
                    key: "mmsNum"
                },
                {
                    title: "登录天数",
                    key: "loginNum"
                },
                {
                    title: "认证",
                    key: "auth"
                },
                {
                    title: "操作",
                    key: "caozuo",
                    render: (h, params) => {
                        return h("div",
                            [
                                h("Button", {
                                    style: {
                                        marginRight: '10px'
                                    },
                                    props: {
                                        type: "primary",
                                        size: "small"
                                    },
                                    domProps: {
                                        innerHTML: '禁言'
                                    },
                                    on: {
                                        click: () => {
                                            this.modifyState(
                                                params.row.id,
                                                params.index
                                            );
                                        }
                                    }
                                }),
                                h("Button", {
                                    props: {
                                        type: "primary",
                                        size: "small",

                                    },
                                    domProps: {
                                        innerHTML: '拉黑'
                                    },
                                    on: {
                                        click: () => {
                                            this.modifyState(
                                                params.row.id,
                                                params.index
                                            );
                                        }
                                    }
                                })
                            ]);
                    }
                }
            ],
            cityList: [
                '上海', '北京', '广州'
            ],
            data1: [
                {
                    userid: '000001',
                    username: '悠悠凌风',
                    time: '2019-02-26',
                    province: '上海',
                    petNum: '5',
                    followNum: '18',
                    fansNum: '1820',
                    mmsNum: '122',
                    loginNum: '462',
                    auth: '摄影达人'
                }
            ]
        };
    },
    methods: {

        // 通过游戏名查询
        gameNameFind() {
            if (this.gameName !== "") {
                this.axios
                    .get(
                        `${this.siteUrl}/accountManagement/username/${
                        this.gameName
                        }/1/10`
                    )
                    .then(response => {
                        console.log(response);
                    })
                    .catch(function (error) {
                        console.log(error);
                    });
            } else {
                this.$Message.error("请输入游戏名");
            }
        },
        //通过用户ID查询
        userIdFind() {
            this.current = 1;
            if (this.userId !== "") {
                this.axios
                    .get(
                        `${this.siteUrl}/accountManagement/id/${
                        this.userId
                        }/1/10`
                    )
                    .then(response => {

                    })
                    .catch(function (error) {
                        console.log(error);
                    });
            } else {
                this.$Message.error("请输入用户ID");
            }
        },
        //获取当前页数
        change(page) {
            this.current = page;
            this.axios
                .get(
                    `${this.siteUrl}/accountManagement/username/${
                    this.gameName
                    }/${this.current}/10`
                )
                .then(response => {
                    console.log(response);
                })
                .catch(function (error) {
                    console.log(error);
                });
        }
    }
};
</script>
<style scoped>
h2 {
    text-align: center;
    margin-bottom: 20px;
}

form {
    text-align: left;
}

ul {
    margin-top: 20px;
}
</style>